'use strict'
import React from 'react'
import style from '../css.css'
import List from './list'

const { list } = serverData
class Ranking extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      nav: 0,
      state: [false, false]
    }
    this._clickNav = this._clickNav.bind(this)
    this._handleState = this._handleState.bind(this)
  }
  _clickNav(nav) {
    console.log(nav)
    this.setState({ nav })
  }
  _handleState() {
    let { nav, state } = this.state
    state[nav] = !state[nav]
    this.setState({ state })
  }
  _renderList() {
    let { nav, state } = this.state
    let arrary = list[nav]

    let navState = state[nav]
    let arr = arrary.map((item, index) => {
      if (index >= 5 && !navState) { return }
      return (
        <List item={item} index={index} key={index} nav={nav} />
      )
    })
    return arr
  }
  _moreBtn() {
    let { nav, state } = this.state
    let arrary = list[nav]
    let navState = state[nav]
    if (arrary.length > 5) {
      return (<div className={navState ? style.MoreBtn2 : style.MoreBtn} onClick={this._handleState}></div>)
    }
  }
  render() {
    return (
      <div className={style.rankWrap}>
        <div className={style.topBanner}></div>
        <div className={style.rankTitle}>
          <div className={this.state.nav==0 ? style.left:style._left} onClick={()=>{this._clickNav(0)}}> </div>
          <div className={this.state.nav==0 ? style.right:style._right} onClick={()=>{this._clickNav(1)}}> </div>
        </div>
        <div className={style.rankList}>
          {this._renderList()}
        </div>
        {this._moreBtn()}
      </div>
    )
  }
}
export default Ranking
